<template>
  <div>
    <div class="bg1"></div>
	<div class="gyl">
	        利福平耐药（耐多药）结核病监测平台
	        
	    <div class="gy2" ></div>   
	</div>
	<div class="bg">
		<div class="wel">用户登录</div>			
        <div class="user">
       	    <div id="yonghu" style="">用户名：  </div>
       	    <input  type="text" name="用户"  value="admin" v-model="username" />
        </div>
        <div class="password" >
        	<div id="yonghu" >密&nbsp;&nbsp;&nbsp;码：  </div>
       	    <input class="" type="password" name="密码" value="admin" v-model="password" />
        </div>
        <div v-if="loginFail" style="position: absolute;top: 16em;left: 3em;font-size: 12px;color: red;">账号/密码不匹配，请重新输入</div>
        <div class="rem" >
       	  <input type="checkbox" name="" id="" value="" />
        	 <div id="reb">
        	 	记住密码
        	 </div>
        </div>
        <div class="fg" >
       	    <div style="font-size: 11px;margin-top: 11px;">
       	    	<a style="font-size: 11px;" href="#">忘记密码？</a>
       	    </div>
        </div>
        <input class="btn" @click="submitForm()" type="button" name="登录" value="登录" />
	</div>
  </div>
</template>

<script>
export default {
  name: 'Login',
  data () {
    return {
    	loginFail: false,
    	username: '',
    	password: '',
    	token: '',
    	type:'username'
    }
  },
  mounted () {

  },
  methods: {
  	//add a function to decide which
	checkAccountInputType(username){
	  if (/^1[34578]\d{9}$/.test(username)) {
	      this.type = "phone"
	  } else if(/^([0-9A-Za-z\-_\.]+)@([0-9a-z]+\.[a-z]{2,3}(\.[a-z]{2})?)$/.test(username)){
	      this.type = "email"
	  } else {
	      this.type = "username"
	  }
	},
  	submitForm(){
	    var _this = this
	    _this.checkAccountInputType(_this.username);
	    _this.$axios.post('/api/v1/hospital/monitor_login', {
	        account: _this.username,
	        password: _this.password,
	        type: _this.type
	    }).then(function(res) {
	        _this.token = res.data.data.token
	        _this.$axios.defaults.headers.common['Authorization'] = 'Token ' + _this.token;
	        _this.$router.push("/DataShow");
	        console.log(_this.token)
	    })
	    .catch(function(error) {
	        console.log(error)
	        _this.loginFail = true
	    });
  	}
  }
}
</script>

<style scoped>
	*{
	    font-family: "微软雅黑";
	    font-size: 16px;
	    border: 0;
	    padding: 0;
	    margin: 0;
	    color: #666;
	    box-sizing:border-box;
	    -moz-box-sizing:border-box;
	    -webkit-box-sizing:border-box;
	}
	.bg1{
		width:100%;
		height: 237px;
		background: #347ebc;
		opacity: 0.6;
	    position:absolute;
	    left:0;
	    top:0px;
	    right:0px;
	    bottom:0px;
	    margin:auto;
	}
	.gyl{
		width:900px;
		height: 290px;
		color: #FFFFFF;
		font-size: 68px;
		position:absolute;
	    left:10%;
	    top:11%;
	    
	    bottom:0px;
	    margin:auto;
	}
	.gy2{
		color: #fff;
		margin-left: 6px;
		font-size: 18px;
		text-align: center;
		margin-top: 10px;
	}
	.bg{
		width: 375px;
		height: 337px;
		background: #fff;
		position: relative;
	    position:absolute;
	    left:62%;
	    top:0px;
	    right:0px;
	    bottom:0px;
	    margin:auto;
	    z-index: 1;
	    box-shadow:0px 0px 50px rgba(0, 0, 0, 0.4);
	    border-radius: 5px;
	}
	.password{
	     position: absolute;
	     top: 9.5rem;
	     right: 2.3rem;
	     display: flex;
	}
	.btn{
	     position: absolute;
	     top: 17rem;
	     right: 2.5rem;
	     border: none;
	     color: #fff;
	     width: 18.825rem;
	     text-align: center;
	     background-color: #347ebc;
	     text-indent: 0rem;
	}
	.img{
		width: 100%;
		position: absolute;
	    left: 0;
	    right: 0;
		margin: 0 auto;
	    z-index: -1;
	}
	.wel{
		width: 375px;
		height: 35px;
		color: #347ebc;
	    font-size: 1.5rem;
	    position: absolute;
	    top: 2rem;
	    text-align: center;
	}
	input{
		 border-bottom:0.0625rem solid #347ebc;
	     height: 2.5625rem;
	     width: 15.8125rem;
	     text-indent: 3.125rem;
	     outline:none;
	}
	.user{
		 position: absolute;
	     top: 6rem;
	     right: 2.3rem;
	     display: flex;
		
	}
	.rem{
		 position: absolute;
	     top: 14rem;
	     right: 17.2rem;
	     border: none;
	     color: #323333;
	}
	.rem input{
		width: 0.8125rem;
	}
	.fg{
		 position: absolute;
	     top: 14rem;
	     right: 2.5rem;
	     border: none;
	     color: #323333;
	}
	#yonghu{
		height: 41px;
		line-height: 41px;
	}
	#reb{
		margin-top: -33px;
		margin-left: 20px;
		font-size: 11px;
	}

	@media (min-width:1201px) and (max-width:1500px){
		.gyl{
			width: 600px;
	    	font-size: 60px;
	    	top: 16%;
	    }
	}
	@media (min-width:800px) and (max-width:1200px)

	{
	   .bg{
	        width: 355px;
		    height: 300px;
	    }
	    .gyl{
	    	font-size: 50px;
	    	width: 400px;
	    }
	   .wel{
	   	   width: 355px;
	   } 
	    .user{
	    	top: 5rem;
	        right: 3.5rem;
	    }
	    .password{
	    	top: 8rem;
	        right: 3.5rem;
	    }
	    input{
	    	
	        width: 12rem;
	    }   
	    .rem{
		    top: 11rem;
	        right: 14.3rem;
	    }
	    .fg{
		    top: 11rem;
	        right: 3.5rem;
	    }
	    .btn{
	    	top: 14rem;
	        width: 15rem;
	    }
	   
	}

</style>
